import React, { useEffect } from 'react';
import { rect } from "../types/data";
interface input {
  src?: string
  rect: rect
}
function ImgCap({ src, rect }: input) {
  let dom: HTMLCanvasElement | null = null;
  useEffect(() => {
    if (dom && src) {
      const ctx = dom.getContext('2d');
      const img = new Image();
      img.src = src;      
      img.onload = function(){
        const {x,y,height,width} = rect
        ctx?.drawImage(img,x,y,width,height,0,0,width,height)
      }
    }
  });
  const style={
    height:'25vw',
  }
  return (
    <canvas style={style} height={rect.height} width={rect.width} ref={ref => dom = ref}></canvas>
  );
}

export default ImgCap;
